
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home.jsx';
import About from './components/About.jsx';
import NotFound from './components/NotFound.jsx';
import ParentComponent from './components/ParentComponent.jsx';
import Child1Component from './components/Child1.jsx';
import Child2Component from './components/Child2.jsx';


function App() {
  return (
    <Router>
      <div className="mk-container">
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/about">关于我们</Link>
            </li>
            <li>
              <Link to="/notfound">404页面</Link>
            </li>
            <li>
              <Link to="/parent">ParentComponent</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/notfound" element={<NotFound />} />
          <Route path="/parent" element={<ParentComponent />} >
               <Route path="child1" element={<Child1Component />} />
               <Route path="child2" element={<Child2Component />} />
          </Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;
